<template>
  <div class="recommendation">
    <home-nav title="个性化推荐" :more="false"></home-nav>
    <div class="recommendation-list flex">
      <song-list-layout :playlists="personalizedMusic" @jumpPlayListDetails="jumpPlayListDetails" @play="play" :isOther="true"/>
    </div>
  </div>
</template>

<script setup>
import { getPersonalizedMusic } from "@/api/home/index";
import HomeNav from '@/components/HomeNav/index.vue'
import SongListLayout from '@/components/SongListLayout/index.vue'


import {ref} from "vue";
import { useRouter } from "vue-router"
import { useStore } from "@/store/index"


const router = useRouter()
const store = useStore()
const personalizedMusic = ref([])

// 获取个性化推荐
getPersonalizedMusic().then(res => {
  const { code, recommend } = res
  if (Number(code) === 200) {
    personalizedMusic.value = recommend.slice(0, 3)
    // console.log(recommend)
  }
})

// 跳转到歌单详情
const jumpPlayListDetails = (id = '') => {
  router.push({
    path: '/play-list-detail',
    query: {id: id}
  })
}
// 播放歌单音乐
const play = (id) => {
  // 获取数据歌单数据
  store.getPlaylistDetail(id)
}


</script>

<style scoped>

</style>
